<template>
 <div class="tab-bar-item" @click="itemClick">

   <div v-if="!isActive">
     <slot name="item-icon"></slot>
   </div>

   <div v-else>
     <slot name="item-icon-active"></slot>
   </div>

<!--   动态绑定颜色-->
   <div :style="activeStyle">
     <slot name="item-text"></slot>
   </div>

 </div>
</template>

<script>
export default {
  name: "TabBarItem",
  // 传入路径
  props:{
    // 出入的东西，并规定类型
    path: String,
    activeColor: {
      type: String,
      default: 'orangered'
    } ,
  },
  data(){
    return {
    }
  },
  computed:{
    isActive(){
      // 判断是否为点击的组件
      return this.$route.path == this.path
    },
    // 动态改变颜色
    activeStyle(){
      // 如果true就返回 带内容的，false就返回空值
      return this.isActive ? {color: this.activeColor} : {}
    }
  },
  methods:{
    itemClick(){
      // console.log('itemClick');
      // 改变路径
      this.$router.push(this.path)
      // console.log(this.path);
    }
  }
}
</script>

<style scoped>
.tab-bar-item{
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-family: "microsoft yahei";
}
/*设置图标*/

/*!*设置活跃状态*!*/
/*.active{*/
/*  color: orangered;*/
/*}*/


</style>
